﻿@{
    Layout = null;
}
<style type="text/css">
    .col-md-2 a {
        display: block;
        height: 25px;
        line-height: 25px;
    }
    .select{
        border:1px;
    }
</style>
<script type="text/javascript">

    //添加
    $("#btnAdd").unbind("click").click(function () {
        var flag = true;
        var addcontent = $('#addcontent').val();
        if (addcontent == '') {
            alert("请输入内容！");
            return false;
        }

        $("#listKeys option").each(function () {
            var text = $(this).text();
            if (text.toLowerCase() == addcontent.toLowerCase()) {
                alert("不能添加相同的内容！");
                flag = false;
                return false;
            }
        })
        if (flag) {

            //在下拉框最后添加一个选项
            $("#listKeys").append("<option value='" + addcontent + "'>" + addcontent + "</option>");
            //在下拉框最前添加一个选项
            //$("#listKeys").prepend("<option value='" + addcontent + "'>" + addcontent + "</option>");
        }

        $('#addcontent').val(""); //清空内容
    })


    //移除
    $("#btnDel").unbind("click").click(function () {

        var Index = $("#listKeys").get(0).selectedIndex;
        var Value = $("#listKeys").val(); //获取Select选择的Value 
        if (Index >= 0) {
            $("#listKeys option[value='" + Value + "']").remove();
            $('#addcontent').empty(); //清空内容
        }
        else {
            alert("请先选择内容，再移除！");
            return false;
        }

    })


    /* 置顶的option */
    function moveTop() {

        var opts = [];
        obj = $("#listKeys").get(0);
        for (var i = obj.options.length - 1 ; i >= 0; i--) {
            if (obj.options[i].selected) {
                opts.push(obj.options[i]);
                obj.remove(i);
            }
        }
        var index = 0;
        for (var t = opts.length - 1 ; t >= 0 ; t--) {
            var opt = new Option(opts[t].text, opts[t].value);
            opt.selected = true;
            obj.options.add(opt, index++);
        }
    }


    /* 向上移动选中的option */
    function moveUp() {
        if (null == $('#listKeys').val()) {
            alert('请选择一项');
            return false;
        }
        //选中的索引,从0开始 
        var optionIndex = $('#listKeys').get(0).selectedIndex;
        //如果选中的不在最上面,表示可以移动 
        if (optionIndex > 0) {
            $('#listKeys option:selected').insertBefore($('#listKeys option:selected').prev('option'));
        }
    }

    /* 向下移动选中的option */
    function moveDown() {
        if (null == $('#listKeys').val()) {
            alert('请选择一项');
            return false;
        }
        //索引的长度,从1开始 
        var optionLength = $('#listKeys')[0].options.length;
        //选中的索引,从0开始 
        var optionIndex = $('#listKeys').get(0).selectedIndex;
        //如果选择的不在最下面,表示可以向下 
        if (optionIndex < (optionLength - 1)) {
            $('#listKeys option:selected').insertAfter($('#listKeys option:selected').next('option'));
        }
    }

    //按Alt加上下鍵也可以移動   
    $("#listKeys").keydown(function (evt) {
        if (!evt.altKey) return;
        var k = evt.which;
        if (k == 38) { moveUp(); return false; }
        else
            if (k == 40) { moveDown(); return false; }
    });

    /* 置底的option */
    function moveBottom() {

        var opts = [];
        var opts = [];
        obj = $("#listKeys").get(0);
        for (var i = obj.options.length - 1 ; i >= 0; i--) {
            if (obj.options[i].selected) {
                opts.push(obj.options[i]);
                obj.remove(i);
            }
        }
        for (var t = opts.length - 1 ; t >= 0 ; t--) {
            var opt = new Option(opts[t].text, opts[t].value);
            opt.selected = true;
            obj.options.add(opt);
        }
    }

    //先卸载再加载事件
    $("#btnSubmit").unbind("click").click(function () {

        var strKey = "";
        var len = listKeys.length;//通过length属性获取select的数量
        if (len > 0) {
            $("#listKeys option").each(function () {
                var text = $(this).text();
                if (strKey.length > 0)
                    strKey += ";";
                strKey += text;
            })

            $("#" + $('#fieldname').val()).val(strKey);//隐藏控件插入数据使用保存
            //关闭页面
            $('#btnClose').click();
        }
        else {
            alert("请先配置" + $('#fieldname').val() + "关键词！");
            return false;
        }
    })

</script>
@*<div class="talkDiv talkW-550 form-h form-h-8em" >
    <div class="talkDiv-title">
        <a class="icon icon-close" title="关闭" href="javascript:void(0);" onclick="closeView()" style="top: 15px"><i class="iconfont icon-error3"></i></a>
    </div>
    <div class="talkDiv-body talkDiv-body1" style="padding: 15px 40px 20px 20px">*@
        <div class="row">
            <div class="col-md-8" style="float:left">@Html.TextBox("addcontent", "", new { id = "addcontent", @class = "f-text span5" })</div>
            <div class="col-md-4" style="float:left;padding-left:0px">
                <button type="button" id="btnAdd" class="btn btn-l btn-submit btn-warn-f">添加</button>
                <button type="button" id="btnDel" class="btn btn-l btn-submit btn-warn-f">移除</button>
            </div>
        </div>

        <div class="row">
            <div class="panel panel-default" style="margin: 15px;">
                <div class="panel-body" style="width:550px;height:150px">
                    <div class="col-md-10" style="float:left;width:430px;height:150px">

                        @if (ViewData["listKeys"] != null)
                        {
                            SelectList list = ViewData["ListKey"] as SelectList;    
                            @Html.ListBox("listKeys", list, new { id = "listKeys",@class="f-textarea span6", style = "width:400px;height:120px" })
                        }
                        else
                        {
                            <select id="listKeys" name="listKeys" multiple="multiple" class="f-textarea span6" style="width:430px; height: 120px">
                            </select>
                        }


                    </div>
                    <div class="col-md-2" style="float:left;width:60px;padding-left:35px">
                        <a onclick="javascript:moveTop()" title="置顶" class=' glyphicon glyphicon-open '></a>
                        <a onclick="javascript:moveUp()" title="快速鍵: alt+向上" style="
    width: 8px;
    height: 14px;
    background: url(../images/iconfont-sprite.png) no-repeat;" class="iconfont-s iconfont-right-triangle-s"></a>
                        <a onclick="javascript:moveDown()" title="快速鍵: alt+向下" class='glyphicon glyphicon-arrow-down'></a>
                        <a onclick="javascript:moveBottom()" title="置底" class='glyphicon glyphicon-save'></a>
                    </div>
                </div>

            </div>
        </div>
@*    </div>
</div>*@

<input type="hidden" id="dbID" name="dbID" value="@ViewBag.dbID" />
<input type="hidden" id="dbCode" name="dbCode" value="@ViewBag.dbCode" />
<input type="hidden" id="dbName" name="dbName" value="@ViewBag.dbName" />
<input type="hidden" id="sysid" name="sysid" value="@ViewBag.sysid" />
<input type="hidden" id="fieldname" name="fieldname" value="@ViewBag.fieldname" />
<input type="hidden" id="fieldvalue" name="fieldvalue" value="@ViewBag.fieldvalue" />
